// 因为我们制作的是网页轮播图，所以必须等到页面加载完成，图片下载完毕再去实现轮播图功能，所以，我们必须在load事件中做轮播图
window.addEventListener("load", function () {
  // 0.需要先把要使用的元素获取得到，focus盒子，ul盒子，ol盒子，左箭头，右箭头，focus盒子的宽度(721px)
  var focus = document.querySelector(".focus");
  var ul = document.querySelector(".focus ul");
  var ol = document.querySelector(".focus ol");
  var arrow_right = document.querySelector(".focus .arrow-r");
  var arrow_left = document.querySelector(".focus .arrow-l");
  var focusWidth = focus.clientWidth;
  var flag = true;

  // 1. 鼠标悬停在轮播图盒子中的时候，显示左右箭头，鼠标离开轮播图盒子的时候，隐藏左右箭头
  focus.addEventListener("mouseenter", function () {
    // 显示左右箭头
    arrow_right.style.display = "block";
    arrow_left.style.display = "block";
    clearInterval(timer);
  });
  focus.addEventListener("mouseleave", function () {
    // 显示左右箭头
    arrow_right.style.display = "none";
    arrow_left.style.display = "none";
    timer = setInterval(function(){
        arrow_right.click();
    },2000)
  });

  // 2.1 有几张轮播图(ul li)我就显示几个小圆点(ol li)
  // 2.2 当我们点击小圆点的时候，希望能展示小圆点对应的轮播图
  for (var i = 0; i < ul.children.length; i++) {
    var li = document.createElement("li");
    // 2.2.1 给每一个小圆点添加一个索引，记录序号
    li.setAttribute("data-index", i);

    ol.appendChild(li);
  }
  // 此时我们不想给每一个小圆点添加点击事件，我们给小圆点的爸爸（ol）添加点击事件，这运用了事件委托的思想
  ol.addEventListener("click", function (e) {
    // 编写一个判断，如果点击的是ol元素，咱就不做处理
    if (e.target === this) {
      return;
    }

    // 2.2.2 获取点击的小圆点的index索引
    var index = e.target.getAttribute("data-index");

    // 2.2.3 根据index索引找到对应的轮播图，将之进行展示
    // 怎么来让轮播图展示对应索引的轮播图
    // ul盒子是定位的，想要让他展示其他轮播图，需要修改ul盒子的left定位值
    // 展示第一张轮播图，left值为0 = -0 *721
    // 展示第二章轮播图，left值为-721  = -1 * 721
    // 展示第三张轮播图，left值为-1442 = -2 * 721
    var moveLeft = -index * focusWidth;

    // ul.style.left = moveLeft + 'px';
    animate(ul, moveLeft);

    // 干掉所有人
    ol.querySelector('.current').classList.remove('current');
    // for (var i = 0; i < ol.children.length; i++) {
    //   ol.children[i].className = "";
    // }
    // 留下我自己
    // e.target.className = "current";
    e.target.classList.add('current')
    num = circle = index;
  });

  // 默认选中第一个ol里面的li
  ol.children[0].className = "current";
  // 无缝轮播的第一步：把第一张轮播图复制一份 放到所有轮播图的后面
  var first = ul.children[0].cloneNode(true);
  ul.appendChild(first);

  // 3. 当用户点击右箭头，切换到下一张轮播图
  // 声明一个变量，用来记录播放的轮播图的索引
  var num = 0;
  // 声明一个变量，用来控制小圆点切换的索引
  var circle = 0;
  // 给右箭头添加点击事件，当点击右箭头的时候，修改轮播图索引，并进行动画轮播
  arrow_right.addEventListener("click", function () {
    if(flag == false){
        return;
    }

    flag = false;
    // 如果已经到了最后一张图片，就不能再加了，要回到第一张轮播图
    // 无缝轮播的第二步：判断是否已经到了最后一张图片，如果到了最后一张图片，就瞬间切换到第一张图片。
    if(num == ul.children.length - 1){
        num = 0;
        ul.style.left = 0;
    }
    num++;
    var moveLeft = -num * focusWidth;
    animate(ul, moveLeft, function(){
        flag = true
    });

    // 实现小圆点的切换:排他
    // 干掉所有人
    for(var i=0;i<ol.children.length;i++){
        ol.children[i].className = '';
    }
    // 留下我自己（当前播放的轮播图对应的那个小圆点）
    circle++;
    if(circle == ul.children.length - 1){
        circle = 0;
    }
    ol.children[circle].className = 'current';
  });

  // 给左箭头添加点击事件，当点击左箭头的时候，修改轮播图索引，并进行动画轮播
  arrow_left.addEventListener("click", function () {
    // 判断是不是已经到了第一张图片，如果是就瞬间切换到最后一张图片
    if(num == 0){
        num = ul.children.length - 1;
        ul.style.left = -num*focusWidth+'px';
    }
    num--;
    var moveLeft = -num * focusWidth;
    animate(ul, moveLeft);

    // 实现小圆点的切换:排他
    // 干掉所有人
    for(var i=0;i<ol.children.length;i++){
        ol.children[i].className = '';
    }
    // 留下我自己（当前播放的轮播图对应的那个小圆点）
    circle--;
    if(circle < 0){
        circle = ol.children.length - 1;
    }
    ol.children[circle].className = 'current';
  });

  // 自动轮播，开启一个定时器，每隔2秒钟触发一次 右箭头的点击事件
  var timer = setInterval(function(){
      arrow_right.click();
  },2000)

});
